<template>
  <div>
    <swiper :slidesPerView="'auto'" :spaceBetween="30" :modules="modules" class="mySwiper">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
    </swiper>
  </div>
</template>
<script setup lang="ts">
import { Props } from '@/types/swiper'
import { withDefaults, ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination } from 'swiper/modules'
const modules = ref([Pagination])
onMounted(() => {
  console.log('mounted')
})
// 默认值
const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})
console.log(`output->`, props)
</script>
<style lang="less" scoped>
.about {
  color: red;
}
</style>
